import React, { Fragment } from "react";
import { Route, Routes, useLocation } from "react-router-dom";
import { Layout } from "antd";
import { items } from "./router/columns";
import { elements, titles } from "./columns";
import { Router } from "./router";
import "./App.css";

const { Header, Sider, Content } = Layout;

const headerStyle: React.CSSProperties = {
	backgroundColor: "#fff",
	borderBottom: "2px solid #ccc",
};

const contentStyle: React.CSSProperties = {
	backgroundColor: "#ccc",
};

const siderStyle: React.CSSProperties = {
	backgroundColor: "#001529",
	overflow: "auto",
};

const layoutStyle = {
	height: "100%",
	overflow: "hidden",
};

function App() {
	const location = useLocation();

	return (
		<Layout style={layoutStyle}>
			<Sider width="25%" style={siderStyle}>
				<Router />
			</Sider>
			<Layout>
				<Header style={headerStyle}>{titles[location.pathname]}</Header>
				<Content style={contentStyle}>
					<Routes>
						{items.map(({ key }) => {
							const path = key === "/" ? "/*" : key;
							return (
								<Fragment key={key}>
									<Route
										path={path}
										element={elements[key]}
									/>
								</Fragment>
							);
						})}
					</Routes>
				</Content>
			</Layout>
		</Layout>
	);
}

export default App;
